<template>
<div class="card device-detail">
      <div class="flex detail-header">
        <img class="shrink0 mr20 header-img" :src="deviceInfo.deviceRunStatus==3?normal:offline">
        <div class="flex1 flex-alignc-justifyb">
          <div class="mr20">
            <div>{{ deviceInfo.logicAddress }}</div>
            <div>{{ deviceInfo.controllerName }}</div>
          </div>
          
          <el-switch v-model="runStatus" :before-change="handleStatusChange" />
        </div>
      </div>

      <el-tabs v-model="tab">
        <el-tab-pane label="基础信息" name="1">
          <div>
            <div class="flex mb20">
              <div class="flex1">当前功率(W): {{ detail.power }}</div>
              <div class="flex1">今日发电量(kWh): {{ detail.todayElectricQuantity }}</div>
            </div>
            <div class="flex mb20">
              <div class="flex1">当前电压(V): {{ detail.voltage }}</div>
              <div class="flex1">当月发电量(kWh): {{ detail.monthElectricQuantity }}</div>
            </div>
            <div class="flex mb20">
              <div class="flex1">当前电流(A): {{ detail.current }}</div>
              <div class="flex1">历史发电量(kWh): {{ detail.totalElectricQuantity }}</div>
            </div>
            <div class="flex">
              <div class="flex1">当前温度(℃): {{ detail.temperature }}</div>
            </div>
          </div>
        </el-tab-pane>
        <!-- 2025.7.21,暂时先不要 -->
        <!-- <el-tab-pane :label="`告警信息(${rulesList.length})`" name="2">
          <div class="warn-lsit">
            <div class="warn-item" v-for="(item,index) in rulesList" :key="index">
              <div class="warn-title">
                <span class="mr20">{{ item.date }}</span>
                <span>{{ item.weekday }}</span>
              </div>
              <div class="record-list">
                <div class="record-item" v-for="(item1,index1) in item.children" :key="index1">
                  <div class="flex-alignc mb5">
                    <div class="record-time">{{ item1.time }}</div>
                    <div :class="['record-tag',item1.ruleType==1?'tag-F08502':'tag-F43430']">{{item1.ruleType==1?'预警':'告警'}}</div>
                  </div>
                  <div class="record-centent">
                    {{ item1.ruleContent }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-tab-pane> -->
      </el-tabs>
    </div>
</template>

<script setup>
import { ElSwitch, ElTabs,ElTabPane,ElMessage,ElMessageBox,ElNotification } from 'element-plus'
import { deviceDetailApi,deviceStatusHandApi,deviceRuleDetailApi } from '@/api/station';
import offline from '@/assets/images/offline.png'
import normal from '@/assets/images/normal.png'
import { parseTime } from '@/utils/ruoyi'

const props = defineProps({
  deviceInfo:{
    type: Object,
    default: () => ({}),
  }
})

const tab = ref('1')
const runStatus = ref()

const handleStatusChange = () => {
  return new Promise((resolve,reject) => {
    ElMessageBox.confirm(`你确定要${props.deviceInfo.deviceRunStatus==3?'关停':'运行'}【${props.deviceInfo.logicAddress}】？`, "提示", {
      confirmButtonText: "确认",
      cancelButtonText: "取消",
      type: "warning",
      autofocus: false,
      closeOnClickModal: false,
    }).then(async () => {
      try {
        let res = await deviceStatusHandApi(props.deviceInfo.deviceRunStatus==3?'stop':'run',{deviceNo:props.deviceInfo.deviceNo})
        ElNotification({
          title: "成功",
          message: "操作成功",
          type: "success",
        });
        if(props.deviceInfo.deviceRunStatus==3) {
          props.deviceInfo.deviceRunStatus = 2
        }else{
          props.deviceInfo.deviceRunStatus = 3
        }
        resolve(true)
      }catch(err) {
        reject(false)
      }
    }).catch(() => {})
  })
}

// 获取电站网关组件详情实时数据
const detail = ref({})
const getDeviceDetail = async () => {
  try {
    let res = await deviceDetailApi({
      controllerNo:props.deviceInfo.controllerNo,
      nodeId:props.deviceInfo.logicAddress
    })
    detail.value = res.data
  }catch(err) {}
}

// 获取电站网关组件告警详情
const rulesList = ref([])
const getDeviceRuleDetail = async () => {
  try {
    let res = await deviceRuleDetailApi({
      controllerNo:props.deviceInfo.controllerNo,
      nodeId:props.deviceInfo.logicAddress
    })
    let arr = []
    Object.entries(res.data).forEach(([key, value]) => {
      let children = value.map(item => {
        let obj = JSON.parse(JSON.stringify(item))
        obj.ruleContent = obj.ruleContent.split('：')[1]
        obj.time = parseTime(obj.updateTime,"{h}:{i}:{s}")
        return obj
      })
      arr.push({
        date:key,
        weekday:getWeekday(key),
        children
      })
    });
    rulesList.value = arr
  }catch(err) {}
}

// 获取今天周几
function getWeekday(time) {
  const weekday = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"]
  return weekday[new Date(time).getDay()]
}

onMounted(() => {
  if(props.deviceInfo.deviceRunStatus==3) { // deviceRunStatus 运行状态 1 离线 2 关闭 3 运行中
    runStatus.value = true
  }else{
    runStatus.value = false
  }
  getDeviceDetail()
  // getDeviceRuleDetail() // 2025.7.21,暂时先不要
})
</script>

<style lang="scss" scoped>
.device-detail {
  width: 400px;
  .detail-header {
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid #bbbbbb;
    .header-img {
      width: 70px;
      height: 50px;
    }
  }

  :deep(.el-tabs__nav-wrap::after) {
    display: none;
  }

  .warn-lsit {
		max-height: 300px;
		overflow-y: auto;
    .warn-item {
      border-bottom: 1px solid #e5e5e5;
      margin-bottom: 24px;
      &:last-child {
        border-bottom: none;
        margin-bottom: 0;
      }
    }
    .warn-title {
      font-size: 16px;
      font-weight: bold;
      color: #3d3d3d;
      margin-bottom: 10px;
    }
    .record-list {
      padding-left: 17px;
      .record-item {
        position: relative;
        margin-bottom: 15px;
        &::after {
          content: '';
          display: block;
          position: absolute;
          top: 6px;
          left: -17px;
          width: 6px;
          height: 6px;
          border-radius: 6px;
          background: #7b7b7b;
        }
        .record-time {
          font-size: 14px;
          color: #7b7b7b;
          margin-right: 14px;
        }
        .record-tag {
          width: 48px;
          height: 20px;
          border-radius: 80px;
          text-align: center;
          line-height: 20px;
          font-size: 14px;
          &.tag-F43430 {
            color: #f43430;
            background-color: #fbeff3;
          }
          &.tag-F08502 {
            color: #f08502;
            background-color: #fcf6e6;
          }
        }
        .record-centent {
          font-size: 14px;
          color: #3d3d3d;
        }
      }
    }
	}
}
</style>